<template>
    <div class="registerview">
        <form>
            <div class="username">
                <label for="username">
                    <input type="text"
                        id="username"
                        v-model="name"
                        placeholder="请输入您的用户名" autofocus
                        @blur="nameBlur" />
                </label>
                <div class="errormessage" v-if="namemessage">{{namemessage}}</div>
            </div>
            <div class="callcode">
                <label for="callcode">
                    <input type="text"
                        id="callcode"
                        v-model="callcode"
                        placeholder="请输入您的电话号码"
                        @blur="nameBlur" />
                </label>
                <div class="errormessage" v-if="callmessage">{{callmessage}}</div>
            </div>
            <div class="password">
                <label for="password">
                    <input type="text"
                        id="password"
                        v-model="password"
                        placeholder="请输入您的密码"
                        @blur="nameBlur" />
                </label>
                <div class="errormessage" v-if="onepassword">{{onepassword}}</div>
            </div>
            <div class="arginpass">
                <label for="arginpass">
                    <input type="text"
                        id="arginpass"
                        v-model="arginpass"
                        placeholder="请再次输入密码"
                        @blur="nameBlur" />
                </label>
                <div class="errormessage" v-if="twopassword">{{twopassword}}</div>
            </div>
            <div class="agreement">
                <input type="checkbox" @click="yesornoagr" :checked="agreement"/>
                <span> 已阅读并同意某某账号的<span>用户协议</span>和<span>隐私政策</span></span>
            </div>
            <button @click.prevent ="register" :disabled="adopt">注册</button>
        </form>
    </div>
</template>

<script>
import {
  ref,
  reactive,
  toRefs,
  computed,
} from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

export default {
  name: 'Registerform',
  setup() {
    const reginfor = reactive({
      name: '',
      callcode: '',
      password: '',
      arginpass: '',
    });
    const router = useRouter();

    const agreement = ref(false);
    // 验证用户名
    const namemessage = computed(() => {
      if (reginfor.name.length === 0 || reginfor.name.length > 6) {
        return '用户名不能为空且不超过6位';
      }
      if (/\W/.test(reginfor.name)) {
        return '用户名不能用特殊字符';
      }
      return false;
    });

    // 验证电话号码
    const callmessage = computed(() => {
      if (reginfor.callcode.length === 0 || reginfor.callcode.length !== 11) {
        return '电话号码不能为空且为11位';
      }
      if (/\D/g.test(reginfor.callcode)) {
        return '电话号码只能是数字';
      }
      return false;
    });

    // 验证第一次密码
    const onepassword = computed(() => {
      if (reginfor.password.length === 0 || reginfor.password.length > 8) {
        return '密码不能为空且不超过8位';
      }
      if (/\W/.test(reginfor.password)) {
        return '密码不能用特殊字符';
      }
      return false;
    });

    // 验证第二次密码
    const twopassword = computed(() => {
      if (reginfor.arginpass !== reginfor.password) {
        return '第二次密码与第一次密码不同';
      }
      return false;
    });

    // 是否同意协议
    function yesornoagr() {
      agreement.value = !agreement.value;
    }

    // 是否通过
    const adopt = computed(() => {
      if (!namemessage.value && !callmessage.value
      && !onepassword.value && !twopassword.value && agreement.value) {
        return false;
      }
      return true;
    });

    function register() {
      axios.post('http://1.14.122.88:5001/api/register', {
        data: reginfor,
      }).then(
        (response) => {
          if (response.data.status === 2) {
            router.replace('/loginview');
          }
        },
        (error) => {
          console.log('失败', error.message);
        },
      );
    }

    return {
      ...toRefs(reginfor),
      register,
      namemessage,
      callmessage,
      onepassword,
      twopassword,
      agreement,
      yesornoagr,
      adopt,
    };
  },
};
</script>

<style scoped>
    .registerview {
        display: flex;
        flex-direction: column;
    }
    form{
        margin-top: 50px;
    }
    form div{
        height: 70px;
    }
    form div input{
        width: 80%;
        height: 40px;
        border-radius: 5px;
        border: 1px solid #FF0000;
        box-shadow: 0px 0px 2px #ff0000;
    }
    .agreement input {
        vertical-align:middle;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        box-shadow: none;
    }
    .agreement span{
        font-size: 13px;
    }
    .agreement span span{
        color: #34C8DE;
    }
    .errormessage{
        margin-top: 5px;
        margin-left: 37px;
        text-align: left;
        font-size: 13px;
        color: #ff0000;
    }
    form button{
        width: 80%;
        height: 40px;
        border: none;
        border-radius: 5px;
        background-color: #96FBCD;
    }
</style>
